<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>实时数据</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <link
      rel="stylesheet"
      href="../../lib/layui-v2.5.5/css/layui.css"
      media="all"
    />
    <link rel="stylesheet" href="../../css/public.css" media="all" />
  </head>
  <style>
    body {
      overflow-y: scroll;
    }
  </style>

  <body>
    <div class="layuimini-container">
      <div class="layuimini-main">
        <div id="Myloading">
          <img
            src="../../lib/layui-v2.5.5/css/modules/layer/default/loading-01.gif"
            alt=""
          />
        </div>

        <script type="text/html" id="toolbarDemo">
          {{# if(d.data.length == '0'){ }} {{# return '
          <div style="color:#666">加载更新数据中...请稍等...</div>
          ' } else { }}
          <!-- 当前位置 -->
          <div style="color:#666">
            {{d.data[0].stationdescribe}} > {{d.data[0].devicedescribe}} >
            {{d.data[0].terminaldescribe}}
          </div>
          {{# } }}
          <div class="layui-btn-container">
            <!-- <button class="layui-btn layui-btn-sm data-add-btn"  lay-event="add">{{d.data[0].stationdescribe}}_{{d.data[0].devicedescribe}}_{{d.data[0].terminaldescribe}}</button> -->
            <!-- <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button> -->
          </div>
        </script>

        <table
          class="layui-hide"
          id="currentTableId"
          lay-filter="currentTableFilter"
        ></table>

        <script type="text/html" id="currentTableBar">
          {{# if(d.name.indexOf('Yc') != -1){ }}
          <a
            class="layui-btn layui-btn-xs data-count-edit"
            layuimini-content-href="page/table/Hcurve.html"
            data-title="设备曲线观测"
            lay-event="edit"
            >曲线</a
          >
          <a
            class="layui-btn layui-btn-xs layui-btn-danger  data-count-delete"
            layuimini-content-href="page/table/Halarm.html"
            data-title="设备报警观测"
            lay-event="delete"
            >报警</a
          >
          {{# } else { }}
          <a
            class="layui-btn layui-btn-xs layui-btn-danger  data-count-delete"
            layuimini-content-href="page/table/Halarm.html"
            data-title="设备报警观测"
            lay-event="delete"
            >报警</a
          >
          {{# } }}
        </script>
      </div>
    </div>
    <script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
    <script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
    <script>
      layui.use(["form", "table", "miniTab"], function () {
        // 2020-03-25 HF sessionStorage中取出数据
        var token = sessionStorage.getItem("newtoken");
        var Htelemeterings = sessionStorage.getItem("SaveHtelemeterings");
        var Htelemeter = JSON.parse(
          sessionStorage.getItem("SaveTelemeterings")
        );
        var alarmData = JSON.parse(sessionStorage.getItem("SaveTelePtss"));

        var $ = layui.jquery,
          form = layui.form,
          miniTab = layui.miniTab,
          table = layui.table;
        miniTab.listen();
        $("#Myloading").remove();

        cyclic();
        /*********定时器************/
        // var letTime;

        // letTime = setInterval(function () {
        //   var ok = null;
        //   cyclic();
        // }, 10000);
        /**************************/

        function cyclic() {
          $.ajax({
            url: "/oms-web/real-time/dataplus-authority?token=" + token,
            dataType: "json",
            type: "POST",
            data: Htelemeterings,
            contentType: "application/json",
            success: function (data) {
              if (data.code == -1) {
                window.location = "../login-1.html";
              }
              randomNo(data.data);
            },
          });
        }

        function randomNo(a) {
          console.log(a, "a");
          table.render({
            elem: "#currentTableId",
            data: a,
            contentType: "application/json",
            toolbar: "#toolbarDemo",
            defaultToolbar: [
              "filter",
              "exports",
              "print",
              {
                title: "提示",
                layEvent: "LAYTABLE_TIPS",
                icon: "layui-icon-tips",
              },
            ],

            cols: [
              [
                // {type: "checkbox", width: 50, fixed: true},//复选框
                {
                  type: "numbers",
                  width: 120,
                  title: "序号",
                  align: "center",
                  fixed: true,
                },
                {
                  field: "describes",
                  minWidth: 120,
                  title: "名称",
                  align: "center",
                },
                {
                  field: "name",
                  minWidth: 130,
                  title: "编号",
                  align: "center",
                },
                {
                  field: "realtime",
                  width: 180,
                  title: "时间",
                  align: "center",
                  templet: function (time) {
                    var data = JSON.parse(time.realtime); //转化为对象
                    function add0(m) {
                      return m < 10 ? "0" + m : m;
                    } //避免少0
                    var time = new Date(data * 1000);
                    var year = time.getFullYear();
                    var month = time.getMonth() + 1;
                    var date = time.getDate();
                    var hours = time.getHours();
                    var minutes = time.getMinutes();
                    var seconds = time.getSeconds();
                    return (
                      year +
                      "-" +
                      add0(month) +
                      "-" +
                      add0(date) +
                      " " +
                      add0(hours) +
                      ":" +
                      add0(minutes) +
                      ":" +
                      add0(seconds)
                    );
                  },
                },
                {
                  field: "value",
                  width: 200,
                  title: "数值",
                  templet: function (e) {
                    return e.value;
                  },
                  align: "center",
                },
                { field: "unit", width: 120, title: "单位", align: "center" },
                {
                  title: "操作",
                  width: 200,
                  templet: "#currentTableBar",
                  fixed: "right",
                  align: "center",
                },
              ],
            ],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            done: function (res, curr, count) {
              //回调函数判断数据中断背景变色
              // 保存数据  作为曲线的名称
              sessionStorage.setItem("SaveCurveName", JSON.stringify(res.data));

              var l = this.elem.next();
              var k = this.id;
              layui.each(table.cache[k], function (index, data) {
                // 隐式转换成数字对比
                var value = parseFloat(data.value),
                  hvalue = parseFloat(data.hvalue),
                  hhvalue = parseFloat(data.hhvalue),
                  lvalue = parseFloat(data.lvalue),
                  llvalue = parseFloat(data.llvalue);
                if (data.describes != "通信状态") {
                  // 给td加颜色不闪  给tr加颜色会闪烁
                  if (value <= llvalue) {
                    l.find('tbody tr[data-index="' + index + '"]')
                      .find("[data-field=value]")
                      .css({ background: "red", color: "#fff" });
                  } else if (value >= hhvalue) {
                    l.find('tbody tr[data-index="' + index + '"]')
                      .find("[data-field=value]")
                      .css({ background: "red", color: "#fff" });
                  } else if (value > llvalue && value < lvalue) {
                    l.find('tbody tr[data-index="' + index + '"]')
                      .find("[data-field=value]")
                      .css({ background: "yellow", color: "crimson" });
                  } else if (value > hvalue && value < hhvalue) {
                    l.find('tbody tr[data-index="' + index + '"]')
                      .find("[data-field=value]")
                      .css({ background: "yellow", color: "crimson" });
                  }

                  //     if(value > hvalue && value < hhvalue){
                  //         // 给td加颜色不闪  给tr加颜色会闪烁
                  //         l.find('tbody tr[data-index="' +index+'"]').find('[data-field=value]').css({'background':'yellow','color':'crimson'});
                  //     }else if(value > hhvalue && value < 150){
                  //         l.find('tbody tr[data-index="' +index+'"]').find('[data-field=value]').css({'background':'red','color':'#fff'});
                  //     // }else if(value > 150){
                  //     }
                  //     //     l.find('tbody tr[data-index="' +index+'"]').find('[data-field=value]').children().text('无效值');
                  //     //     l.find('tbody tr[data-index="' +index+'"]').find('[data-field=value]').css({'background':'darkgrey','color':'#fff'});
                  //     // }
                }

                // 判断是否有曲线 以及 颜色 遥信
                if (data.name.indexOf("Yc") == -1) {
                  l.find('tbody tr[data-index="' + index + '"]')
                    .find("[data-field=realtime]")
                    .empty();
                }

                if (data.name.indexOf("Yc") == -1 && value == 0) {
                  l.find('tbody tr[data-index="' + index + '"]')
                    .find("[data-field=value]")
                    .css({ background: "red", color: "#fff" });
                }
              });
            },
          });
        }

        /*********************************************************/

        // 监听搜索操作
        form.on("submit(data-search-btn)", function (data) {
          var result = JSON.stringify(data.field);
          layer.alert(result, {
            title: "最终的搜索信息",
          });

          //执行搜索重载
          table.reload(
            "currentTableId",
            {
              page: {
                curr: 1,
              },
              where: {
                searchParams: result,
              },
            },
            "data"
          );

          return false;
        });

        /**
         * toolbar监听事件
         */
        table.on("toolbar(currentTableFilter)", function (obj) {
          if (obj.event === "add") {
            // 监听添加操作
            // var index = layer.open({
            //     title: '添加用户',
            //     type: 2,
            //     shade: 0.2,
            //     maxmin:true,
            //     shadeClose: true,
            //     area: ['100%', '100%'],
            //     content: './table/add.html',
            // });
            $(window).on("resize", function () {
              // layer.full(index);
            });
          } else if (obj.event === "delete") {
            // 监听删除操作
            var checkStatus = table.checkStatus("currentTableId"),
              data = checkStatus.data;
            layer.alert(JSON.stringify(data));
          }
        });

        //监听表格复选框选择
        table.on("checkbox(currentTableFilter)", function (obj) {
          console.log(obj);
        });

        // 获取列表data
        table.on("tool(currentTableFilter)", function (obj) {
          //  保存点击 对应名字
          var HcurveName = [];
          var alarmName = [];
          // sessionStorage.setItem('SaveName',obj.data.describes );
          for (let key in Htelemeter) {
            if (obj.data.describes == Htelemeter[key].text) {
              HcurveName.push(Htelemeter[key]);
            }
          }
          for (let key in alarmData) {
            if (obj.data.describes == alarmData[key].text) {
              alarmName.push(alarmData[key]);
            }
          }
          sessionStorage.setItem("SaveName", JSON.stringify(HcurveName));
          sessionStorage.setItem("SaveAlarmName", JSON.stringify(alarmName));
        });
      });
    </script>
  </body>
</html>
